<template>
  <div class="basictable">
    <el-table
      :data="tableData"
      stripe
      border
      max-height="30vh"
      style="width: 100%"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width ? column.width : 'auto'"
        :sortable="column.sortable ? 'custom' : false"
        :filters="column.filters"
        :filter-method="column.filterMethod"
        :filter-placement="
          column.filterPlacement ? column.filterPlacement : 'bottom-end'
        "
      />
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "BasicTable",
  props: {
    tableData: {
      type: Array as PropType<Array<Record<string, any>>>,
      required: true,
    },
    columns: {
      type: Array as PropType<
        Array<{
          prop: string;
          label: string;
          width?: string;
          sortable?: boolean;
          filters?: Array<{ text: string; value: any }>;
          filterMethod?: (value: any, row: any, column: any) => boolean;
          filterPlacement?: string;
        }>
      >,
      required: true,
    },
  },
});
</script>

<style scoped>
.basictable {
  margin-top: 2%;
}
</style>
